<template>
  <el-card class="box-card" style="width: 1420px;">
    <div slot="header" class="clearfix">
      <span class="card-title">近两年陕西省居民消费价格指数</span>
      <el-tooltip class="item" effect="dark" content="指标说明" placement="top">
        <el-button style="float: right;padding: 0" type="text">
          <i class="el-icon-share"/>
        </el-button>
      </el-tooltip>
    </div>
    <div ref="Line1" style="width: 1300px;height:400px;"></div>
    <!--    <div id="Line1" style="width: 400px;height:400px;"></div>-->
    <!-- <div><el-tag type="success" size="medium">医疗保健类</el-tag></div> -->
    <div>
      <el-alert title="医疗保健类" type="success" center show-icon :closable="false">
      </el-alert>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      cpi: {
        cpi: 0.0,
        type: '',
        province: '',
        represent_time: ''

      },
      title:''
    }
  },
  methods: {
    showPie1() {
      let myEcharts = this.$echarts.init(this.$refs.Line1)
      // let myEcharts = this.$echarts.init(document.getElementById("Line1"))
      this.$http.get('apis/cpi/select', {
        params: {
          date: '',
          page: 1,
          province: '陕西省',
          size: 32,
          type: '居民消费价格指数'
        }
      }).then(res => {
        console.log(res)
        let base = +new Date(2020, 6, 1);
        let oneMonth = 24 * 3600 * 1000 * 30;
        let date = [];
        let data = [];
        for (let i = 1; i < res.data.total; i++) {
          var now = new Date((base += oneMonth));
          date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
          data.push(res.data.data[i].cpi);
        }
        let option = {
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%'];
            }
          },
          title: {
            left: 'center',
            text: '近两年陕西省居民消费价格指数'
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            min:99.8,
            max:103
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              start: 0,
              end: 10
            }
          ],
          series: [
            {
              name: 'CPI',
              type: 'line',
              symbol: 'none',
              sampling: 'lttb',
              itemStyle: {
                color: 'rgb(255, 70, 131)'
              },
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 158, 68)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(255, 70, 131)'
                  }
                ])
              },
              data: data
            }
          ]
        };
        myEcharts.setOption(option)
        window.onresize = function () {
          myEcharts.resize();
        };

      })


      // this.$http.get('apis/cpi/select', {
      //   params: {
      //     date: '2022-05',
      //     page: 1,
      //     province: '',
      //     size: 32,
      //     type: '居民消费价格指数'
      //   }
      // }).then(res => {
      //   console.log(res)
      // let provincesAndCpis = []
      // for (let i = 0; i < res.data.data.data.length; i++) {
      //   provincesAndCpis.push({
      //     name: res.data.data.data[i].province,
      //     value: res.data.data.data[i].cpiValue
      //   })
      // }

      // }) .catch(function (error) {
      //   console.log(error);
      // });
    },

  },
  mounted() {
    this.showPie1()
  }
}
</script>

<style scoped>
.card-title {
  font-size: 26px;
}

.el-icon-share {
  font-size: 26px;
}

.item {
  margin-bottom: 14px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 1380px;
  margin-top: 15px;
}
</style>
